import React, { Component } from 'react'
import {
  PlusCircleTwoTone,
  RightOutlined,
  DownOutlined,
  CheckCircleTwoTone,
} from '@ant-design/icons'
import { Checkbox, Button } from 'antd';
import Top from '../../containers/Top'
import './index.css'
import { openNotification } from '../../util/util'
import { reqListPatients, reqDiagnose } from '../../api'

export default class index extends Component {
  state = {
    isHidden: new Array(20).fill(true),
    // isHidden: new Array(4).fill(false),
    plainOptions: ['验血', 'b 超', '取药'], // 全部可选的选项
    checkedList: ['取药'], // 选中的选项
    indeterminate: true, // 是否处于半选中状态
    checkAll: false, // 是否处于全选中状态
    choose: new Array(20).fill(false), // 选择开具处方的患者

    patients: [],
    n: -1,
    // 0-待诊断  2-诊断已完成 success 3-预约已取消 none
    myclass: ['', '', 'success', 'none'], 
    myType: ['待诊断', '', '诊断已完成', '预约已取消'],
  }
  setPatients = async () => {
    const res = await reqListPatients()
    const patients = res.data || []
    this.setState({patients})
  }
  componentDidMount = async () => {
    this.setPatients()
  }
  handleHidden = (n) => {
    if (n === 0 && this.state.patients.length === 0) {
      openNotification({ description: '暂无预约患者' })
      return
    }
    const isHidden = [...this.state.isHidden]
    isHidden[n] = !isHidden[n]
    this.setState({isHidden})
  }
  // 全部选中或全部不选
  onCheckAllChange = e => {
    const { checked } = e.target
    this.setState({
      checkedList: checked ? this.state.plainOptions : [],
      indeterminate: false,
      checkAll: checked
    })
  }
  // 选择多选框
  onChange = list => {
    const len = this.state.plainOptions.length
    this.setState({
      checkedList: list,
      indeterminate: list.length && list.length < len,
      checkAll: list.length === len
    })
  }
  // 选择开具处方的患者
  choose = (n) => {
    const num = this.state.choose.indexOf(true)
    const choose = [...this.state.choose]
    if (num === -1) {
      // 全部未选择——则点击谁就选择谁
      choose[n] = true
    } else {
      // 有选择的——则根据 num 和 n 的值进行处理
      if (n === num) { // 直接取反
        choose[n] = !choose[n]
      } else { // 隐藏 num，显示 n
        choose[num] = false
        choose[n] = true
      }
      // 点击另外的，则仅显示点击的
    }
    this.setState({choose, n})
  }
  // 开具处方
  submit = async () => {
    const { choose, checkedList, patients, n } = this.state
    const chooseNum = choose.indexOf(true)
    if (chooseNum === -1) {
      openNotification({ description: `请选择患者` })
      return
    } else if (!checkedList.length) {
      openNotification({ description: `请选择处方` })
      return
    }

    const { name } = patients[n].patient
    let { sid } = patients[n]
    sid += ''
    await reqDiagnose({sid})
    this.setPatients()
    openNotification({ description: `对患者：<${name}>开具处方成功`, type: 'success' })
    this.setState({ // 开具处方后清空
      checkedList: ['取药'],
      indeterminate: true,
      checkAll: false,
      choose: new Array(20).fill(false),
    })
  }
  render() {
    const CheckboxGroup = Checkbox.Group
    const { patients, myclass, myType,
      choose, isHidden, plainOptions, checkedList, indeterminate, checkAll } = this.state
    const chooseNum = choose.indexOf(true)
    const disabled = !checkedList.length || chooseNum === -1
    return (
      <div className="doctor">
        <Top></Top>
        <div className="d_items">
          <div className="d_item" onClick={() => this.handleHidden(0)}>
            <PlusCircleTwoTone />
            <div className="title">预约患者</div>
            <RightOutlined className="right" hidden={!isHidden[0]}/>
            <DownOutlined className="right" hidden={isHidden[0]}/>
          </div>
          <div className="content" hidden={isHidden[0]}>
          {
            patients.map((patientItem, index) => {
              const { patient, status } = patientItem
              return (
                <table className={`table ${myclass[status]} ${choose[index]?'choose':''}`} onClick={() => this.choose(index)}>
                  <tbody>
                    <tr><td>患者</td><td>{patient.name}</td></tr>
                    <tr><td>性别</td><td>{patient.sex}</td></tr> 
                    <tr><td>出生日期</td><td>{patient.date}</td></tr> 
                    <tr><td>年龄</td><td>{patient.age}</td></tr>
                    <tr><td>状态</td><td>{myType[status]}</td></tr>
                  </tbody>
                </table>
              )
            })
          }
          </div>

          <div className="d_item" onClick={() => this.handleHidden(1)}>
            <CheckCircleTwoTone />
            <div className="title">开具处方</div>
            <RightOutlined className="right" hidden={!isHidden[1]}/>
            <DownOutlined className="right" hidden={isHidden[1]}/>
          </div>
          <div className="content" hidden={isHidden[1]}>
            <Checkbox indeterminate={indeterminate} onChange={this.onCheckAllChange} checked={checkAll} className="box">
              全选/取消全选
            </Checkbox>
            <Button type="primary"
              className={`submit ${disabled?'disabled':''}`} onClick={this.submit}>开具处方</Button>
            <CheckboxGroup options={plainOptions} value={checkedList} onChange={this.onChange} className="check"/>
          </div>
        </div>
      </div>
    )
  }
}
